<!-- @format -->

<template>
  <div
    class="header-container"
    :style="{
      height: theCompHeight + 'px',
      background: headerBackgroundColor,
    }"
  >
    <!-- 状态栏占位 -->
    <div class="status-bar" :style="statusBarStyle"></div>

    <!-- 头部内容区 -->
    <div class="header-content" :style="headerContentStyle">
      <!-- 使用具名插槽，如果有header插槽内容则使用插槽内容，否则显示默认的返回箭头和标题 -->

      <slot name="header"> </slot>
      <div
        v-if="showBack && !$slots.header"
        class="back-btn"
        @click="handleBack"
      >
        <uni-icons
          v-if="theIsHasHistory"
          type="left"
          size="12"
          :color="titleStyle.color || textColor"
        ></uni-icons>
        <uni-icons
          v-if="!theIsHasHistory"
          type="home"
          size="24"
          :color="titleStyle.color || textColor"
        ></uni-icons>
      </div>
      <div
        v-if="!$slots.header"
        class="title"
        :class="{ 'title-center': !showBack }"
        :style="titleStyle"
      >
        {{ title }}
      </div>
    </div>

    <!-- 搜索框 -->
    <view class="search-box" v-if="showSearch">
      <view class="search-input">
        <uni-icons type="search" size="16"></uni-icons>
        <!-- @confirm="handleSearch"
        v-model="searchValue" -->
        <input
          style="margin-left: 12rpx"
          type="text"
          :placeholder="placeholder"
          confirm-type="search"
        />
      </view>
    </view>
  </div>
  <div
    v-if="bgColor != 'transparent'"
    :style="{ height: theCompHeight + 'px' }"
  ></div>
</template>
<script setup lang="ts">
  import {
    ref,
    computed,
    onMounted,
    onUnmounted,
    getCurrentInstance,
  } from 'vue';
  const instance: any = getCurrentInstance();

  const theIsHeaderSlot = computed(() => {
    return !!instance.slots.header;
  });
  // console.log('useSlots() ===>',useSlots);

  // 滚动相关状态
  const scrollTop = ref<number>(0);
  const hasTriggered = ref<boolean>(false);

  // 定义组件属性
  interface Props {
    title?: string; // 标题
    showBack?: boolean; // 是否显示返回按钮
    bgColor?: string; // 背景颜色
    textColor?: string; // 文字颜色
    fixed?: boolean; // 是否固定在顶部
    zIndex?: number; // 层级
    customStyle?: object; // 自定义样式
    showSearch?: boolean; // 是否显示搜索框
    placeholder?: string; // 搜索框占位符
  }

  // 设置默认值
  const theProps = withDefaults(defineProps<Props>(), {
    title: '',
    showBack: true,
    bgColor: '',
    textColor: '#333333',
    fixed: true,
    zIndex: 100,
    customStyle: () => ({}),
  });
  console.log('theProps.bgColor ===>', theProps.bgColor);

  const theIsHasHistory = computed(() => getCurrentPages().length > 1);

  const headerBackgroundColor = computed(() => theProps.bgColor || '');
  // 定义事件
  const theEmit = defineEmits(['back', 'getHeight']);

  // 系统信息
  const systemInfo = ref<any>(null);
  // 胶囊按钮信息
  const menuButtonInfo = ref<any>(null);
  // 计算rpx与px的换算比例
  const rpxToPxRatio = ref<number>(0);

  // 页面滚动监听函数
  const handlePageScroll = (scrollTop: number) => {
    // 将px转换为rpx进行比较
    const scrollTopRpx =
      scrollTop * (750 / (systemInfo.value?.windowWidth || 375));

    // 当滚动超过150rpx且未触发过时，打印666
    if (scrollTopRpx > 150 && !hasTriggered.value) {
      console.log('666');
      hasTriggered.value = true;
    }

    // 当滚动回到150rpx以下时，重置触发状态
    if (scrollTopRpx <= 150 && hasTriggered.value) {
      hasTriggered.value = false;
    }
  };

  // 获取系统信息和胶囊按钮信息
  onMounted(() => {
    // 获取系统信息
    try {
      systemInfo.value = uni.getSystemInfoSync();
      // 计算rpx与px的换算比例
      rpxToPxRatio.value = systemInfo.value.windowWidth / 750;

      // #ifdef MP-WEIXIN
      // 获取微信小程序胶囊按钮信息
      menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
      // #endif
    } catch (error) {
      console.error('获取系统信息失败', error);
    }
  });

  // 暴露滚动监听函数给父组件使用
  defineExpose({
    handlePageScroll,
  });

  // 状态栏高度样式
  const statusBarStyle = computed(() => {
    if (!systemInfo.value) return {};

    return {
      height: `${systemInfo?.value?.statusBarHeight}px`,
      backgroundColor: theProps.bgColor,
    };
  });

  const theCompHeight = computed(() => {
    const theSearchHeight = theProps.showSearch ? 46 : 0;
    const theHeight = systemInfo?.value?.statusBarHeight + theSearchHeight + 44;
    theEmit('getHeight', theHeight);
    return theHeight;
  });
  // 计算头部内容区样式
  const headerContentStyle = computed(() => {
    const style: Record<string, any> = {
      backgroundColor: theProps.bgColor,
      color: theProps.textColor,
    };

    // if (theProps.fixed) {
    //   style.position = 'fixed';
    //   style.top = systemInfo.value
    //     ? `${systemInfo.value.statusBarHeight}px`
    //     : '0';
    //   style.zIndex = theProps.zIndex;
    //   style.width = '100%';
    // }

    // #ifdef MP-WEIXIN
    // 微信小程序环境，调整header-content高度与胶囊按钮一致
    if (menuButtonInfo.value) {
      // 顶部栏高度 = 胶囊上边界坐标 + 胶囊高度 + 缝隙高度 + 胶囊与底部补差（自定义值）
      const gapSize = 8; // 胶囊与底部的缝隙高度（可调整）
      const bottomPadding = 4; // 胶囊与底部补差（自定义值，可调整）

      // 计算内容区高度，与胶囊按钮高度保持一致
      style.height = `${menuButtonInfo.value.height}px`;

      // 计算垂直居中位置
      const capsuleVerticalCenter =
        menuButtonInfo.value.top + menuButtonInfo.value.height / 2;
      const headerTop = systemInfo?.value?.statusBarHeight;
      const headerContentHeightPx = 44; // 内容区固定高度44px
      const contentTop = capsuleVerticalCenter - headerContentHeightPx / 2;
      const verticalOffset = contentTop - headerTop + 6;

      // 如果偏移量不太小，则进行调整
      if (Math.abs(verticalOffset) >= 2) {
        style.transform = `translateY(${verticalOffset}px)`;
      }
    }
    // #endif

    // 合并自定义样式
    return { ...style, ...theProps.customStyle };
  });

  // 计算标题样式
  const titleStyle = computed(() => {
    const style: Record<string, any> = {};

    // #ifdef MP-WEIXIN
    // 微信小程序环境，需要避开胶囊按钮
    if (menuButtonInfo.value) {
      if (!theProps.showBack) {
        // 无返回按钮时，标题居中但需要避开右侧胶囊
        const rightPadding =
          menuButtonInfo.value.width +
          (systemInfo.value.windowWidth - menuButtonInfo.value.right) * 2;
        style.paddingRight = `${rightPadding}px`;
        // 限制最大宽度，避免文字过长
        style.maxWidth = '60%';
      } else {
        // 有返回按钮时，确保标题垂直居中
        style.lineHeight = '1';
        style.height = '100%';
        style.display = 'flex';
        style.alignItems = 'center';
        style.maxWidth = '70%'; // 有返回按钮时可以占用更多空间
      }

      // 确保文字不被截断
      style.whiteSpace = 'nowrap';
      style.overflow = 'hidden';
      style.textOverflow = 'ellipsis';
    }
    // #endif

    return style;
  });

  // 处理返回逻辑
  const handleBack = () => {
    theEmit('back');

    // 判断是否可以返回上一页
    const pages = getCurrentPages();
    if (pages.length > 1) {
      // 有上一页，直接返回
      uni.navigateBack({
        delta: 1,
      });
    } else {
      // 无上一页，跳转到首页
      uni.switchTab({
        url: '/pages/home/Index',
        fail: () => {
          // 如果switchTab失败，尝试redirectTo
          uni.redirectTo({
            url: '/pages/home/Index',
          });
        },
      });
    }
  };
</script>

<style lang="scss" scoped>
  .header-container {
    width: 100%;
    // height: 92rpx;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;

    /* 固定定位时，占位用 */
    &.fixed-placeholder {
      height: var(--header-height, 44px);
    }
  }

  .status-bar {
    width: 100%;
  }

  .header-content {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 15px;
    box-sizing: border-box;

    /* #ifndef MP-WEIXIN */
    /* 非小程序环境下的样式 */
    width: 100%;
    /* #endif */
  }

  .back-btn {
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 10;

    .back-arrow {
      font-size: 20px;
      margin-right: 2px;
    }

    .back-text {
      font-size: 14px;
    }
  }

  .title {
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;

    /* 非居中标题的样式 */
    flex: 1;

    /* #ifndef MP-WEIXIN */
    /* 非小程序环境下的样式 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* #endif */

    &-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);

      /* #ifndef MP-WEIXIN */
      /* 非小程序环境下的居中样式 */
      top: 0;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* 避免与两侧按钮重叠 */
      max-width: 60%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* #endif */
    }
  }

  /* #ifdef MP-WEIXIN */
  /* 微信小程序环境特有样式 */
  .wx-header-adjust {
    /* 顶部栏高度 = 胶囊上边界坐标 + 胶囊高度 + 缝隙高度 + 胶囊与底部补差（自定义值） */
    /* 这里的具体数值会在JS中动态计算 */
  }
  /* #endif */

  .search-box {
    flex: 1;
    padding: 0 20rpx;
    margin-top: 8px;
    height: 30px;
    .search-input {
      height: 80rpx;
      // background-color: rgba(255, 255, 255, 0.8);
      border-radius: 30rpx;
      // border: 1px solid #333;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      background: #ffffff;
      border-radius: 40rpx;
      opacity: 0.54;
      color: #333333;

      .search-icon-image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
      }

      input {
        flex: 1;
        height: 60rpx;
        font-size: 26rpx;
      }
    }
  }
</style>
